<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
	<link rel="stylesheet" type="text/css" href="../src/assets/css/reset.css"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script type="text/javascript">
  	window.onload = function(){
  		var id = 'zxw';
  		function setRem(){  //相对不同设备宽度设置html尺寸函数
  			var sheBeiW;   //告诉我你要相对那个设备宽度
  			var inw = innerWidth;    //获取当前设备宽度
  			if(inw<=450){
  				sheBeiW =375;
  			}else if(inw>450 && inw<=600){
  				sheBeiW = 530
  			}else if(inw>600 && inw<=880){
  				sheBeiW = 650
  			}else if(inw>900){
  				sheBeiW = 900
  			}
  			var rem = inw / sheBeiW * 100 + 'px';
  			var sty = document.createElement('style');  //动态创建style元素
  			sty.setAttribute('id',id);
  			sty.innerHTML = 'html{font-size:' + rem + ';}';  //添加html尺寸
  			document.getElementsByTagName('head')[0].appendChild(sty)  //把style元素加到head中
  		};
  		setRem();
  		var timers = [];  //存储定时器序号
  		window.onresize = function(){
  			var timer = setTimeout(function(){
  				for (var i=0;i<timers.length;i++) {
  					clearTimeout(timers[i])
  				}
  				var idd = document.getElementById('zxw')
  				if(idd){
  					idd.remove()
  				}
  	//					console.log(111)
  				setRem()
  				timers = [];
  			},300)
  			timers.push(timer)
  		}
  	}
  </script>
</html>
